<template>
  <!-- 只保留内容区 -->
  <div :class="styles['page-header']">
    <div :class="styles['header-content']">
      <div :class="styles['header-text']">
        <h1 :class="styles['page-title']">我的考试</h1>
        <p :class="styles['page-subtitle']">查看所有可用的考试和您的考试状态</p>
      </div>
      <div :class="styles['header-actions']">
        <button :class="styles['refresh-btn']" @click="refreshExams">
          <span :class="styles['btn-icon']">🔄</span>
          刷新
        </button>
      </div>
    </div>
  </div>

  <!-- 考试统计卡片 -->
  <div :class="styles['stats-grid']">
    <div :class="styles['stat-card']">
      <div :class="styles['stat-icon']">📊</div>
      <div :class="styles['stat-content']">
        <div :class="styles['stat-number']">{{ stats.total }}</div>
        <div :class="styles['stat-label']">总考试</div>
      </div>
    </div>
    <div :class="styles['stat-card']">
      <div :class="styles['stat-icon']">✅</div>
      <div :class="styles['stat-content']">
        <div :class="styles['stat-number']">{{ stats.available }}</div>
        <div :class="styles['stat-label']">可参加</div>
      </div>
    </div>
    <div :class="styles['stat-card']">
      <div :class="styles['stat-icon']">⏳</div>
      <div :class="styles['stat-content']">
        <div :class="styles['stat-number']">{{ stats.inProgress }}</div>
        <div :class="styles['stat-label']">进行中</div>
      </div>
    </div>
    <div :class="styles['stat-card']">
      <div :class="styles['stat-icon']">🏆</div>
      <div :class="styles['stat-content']">
        <div :class="styles['stat-number']">{{ stats.completed }}</div>
        <div :class="styles['stat-label']">已完成</div>
      </div>
    </div>
  </div>

  <!-- 筛选和搜索 -->
  <div :class="styles['filters-section']">
    <div :class="styles['search-box']">
      <div :class="styles['search-icon']">🔍</div>
      <input v-model="searchQuery" type="text" :class="styles['search-input']" placeholder="搜索考试名称或科目...">
    </div>
    <div :class="styles['filter-group']">
      <select v-model="statusFilter" :class="styles['filter-select']">
        <option value="">所有状态</option>
        <option value="available">可参加</option>
        <option value="in_progress">进行中</option>
        <option value="completed">已完成</option>
        <option value="expired">已过期</option>
      </select>
      <select v-model="subjectFilter" :class="styles['filter-select']">
        <option value="">所有科目</option>
        <option value="Java">Java</option>
        <option value="数据库">数据库</option>
        <option value="数据结构">数据结构</option>
        <option value="算法">算法</option>
      </select>
      <button :class="styles['clear-filters']" @click="clearFilters">
        <span :class="styles['btn-icon']">🗑️</span>
        清除筛选
      </button>
    </div>
  </div>

  <!-- 考试列表 -->
  <div :class="styles['exam-list']">
    <div v-for="exam in filteredExams" :key="exam.id" :class="[styles['exam-card'], styles[exam.status]]">
      <div :class="styles['exam-header']">
        <div :class="styles['exam-title-section']">
          <h3 :class="styles['exam-title']">{{ exam.title }}</h3>
          <div :class="styles['exam-meta']">
            <span :class="styles['exam-subject']">{{ exam.subject }}</span>
            <span :class="styles['exam-duration']">{{ exam.duration }}分钟</span>
          </div>
        </div>
        <div :class="styles['exam-status']">
          <span :class="[styles['status-badge'], styles[exam.status]]">
            {{ getStatusLabel(exam.status) }}
          </span>
          <div :class="styles['status-icon']">{{ getStatusIcon(exam.status) }}</div>
        </div>
      </div>

      <div :class="styles['exam-content']">
        <div :class="styles['exam-info']">
          <div :class="styles['info-grid']">
            <div :class="styles['info-item']">
              <span :class="styles['info-label']">考试时间</span>
              <span :class="styles['info-value']">{{ formatDateTime(exam.startTime) }}</span>
            </div>
            <div :class="styles['info-item']">
              <span :class="styles['info-label']">题目数量</span>
              <span :class="styles['info-value']">{{ exam.questionCount }}道</span>
            </div>
            <div :class="styles['info-item']">
              <span :class="styles['info-label']">总分</span>
              <span :class="styles['info-value']">{{ exam.totalScore }}分</span>
            </div>
            <div v-if="exam.score !== null" :class="styles['info-item']">
              <span :class="styles['info-label']">得分</span>
              <span :class="[styles['info-value'], styles['score']]">{{ exam.score }}/{{ exam.totalScore }}</span>
            </div>
          </div>
        </div>

        <div :class="styles['exam-description']">
          <p>{{ exam.description }}</p>
        </div>

        <div :class="styles['exam-actions']">
          <button v-if="exam.status === 'available'" @click="startExam(exam.id)"
            :class="[styles['action-btn'], styles['primary']]">
            <span :class="styles['btn-icon']">▶️</span>
            开始考试
          </button>
          <button v-if="exam.status === 'in_progress'" @click="continueExam(exam.id)"
            :class="[styles['action-btn'], styles['warning']]">
            <span :class="styles['btn-icon']">🔄</span>
            继续考试
          </button>
          <button v-if="exam.status === 'completed'" @click="viewResult(exam.id)"
            :class="[styles['action-btn'], styles['success']]">
            <span :class="styles['btn-icon']">👁️</span>
            查看结果
          </button>
          <button @click="viewDetail(exam.id)" :class="[styles['action-btn'], styles['secondary']]">
            <span :class="styles['btn-icon']">📋</span>
            考试详情
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 空状态 -->
  <div v-if="filteredExams.length === 0" :class="styles['empty-state']">
    <div :class="styles['empty-icon']">📝</div>
    <h3 :class="styles['empty-title']">暂无考试</h3>
    <p :class="styles['empty-text']">当前没有符合条件的考试，请稍后再查看。</p>
    <button :class="styles['refresh-btn']" @click="refreshExams">
      <span :class="styles['btn-icon']">🔄</span>
      刷新页面
    </button>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import styles from '@/styles/student/exam-list.module.css'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const exams = ref([])
const searchQuery = ref('')
const statusFilter = ref('')
const subjectFilter = ref('')

const stats = ref({
  total: 0,
  available: 0,
  inProgress: 0,
  completed: 0
})

const filteredExams = computed(() => {
  return exams.value.filter(exam => {
    const matchesSearch = !searchQuery.value ||
      exam.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      exam.subject.toLowerCase().includes(searchQuery.value.toLowerCase())

    const matchesStatus = !statusFilter.value || exam.status === statusFilter.value
    const matchesSubject = !subjectFilter.value || exam.subject === subjectFilter.value

    return matchesSearch && matchesStatus && matchesSubject
  })
})

const getStatusLabel = (status) => {
  const labels = {
    available: '可参加',
    in_progress: '进行中',
    completed: '已完成',
    expired: '已过期'
  }
  return labels[status] || status
}

const getStatusIcon = (status) => {
  const icons = {
    available: '✅',
    in_progress: '⏳',
    completed: '🏆',
    expired: '❌'
  }
  return icons[status] || '📝'
}

const formatDateTime = (dateTime) => {
  return new Date(dateTime).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const startExam = (examId) => {
  router.push(`/student/exam/${examId}`)
}

const continueExam = (examId) => {
  router.push(`/student/exam/${examId}`)
}

const viewResult = (examId) => {
  router.push(`/student/exam/${examId}/result`)
}

const viewDetail = (examId) => {
  router.push(`/student/exam/${examId}/detail`)
}

const refreshExams = () => {
  // 模拟刷新数据
  loadExams()
}

const clearFilters = () => {
  searchQuery.value = ''
  statusFilter.value = ''
  subjectFilter.value = ''
}

const loadExams = () => {
  // 模拟数据
  exams.value = [
    {
      id: 1,
      title: 'Java基础期末考试',
      subject: 'Java',
      status: 'available',
      startTime: '2024-01-20 14:00:00',
      duration: 120,
      questionCount: 50,
      totalScore: 100,
      score: null,
      description: '测试Java基础语法、面向对象编程、集合框架等知识点。包含选择题、填空题和编程题。'
    },
    {
      id: 2,
      title: '数据库原理期中考试',
      subject: '数据库',
      status: 'in_progress',
      startTime: '2024-01-18 10:00:00',
      duration: 90,
      questionCount: 40,
      totalScore: 100,
      score: null,
      description: '测试数据库设计、SQL查询、事务管理等知识点。重点考察数据库设计和优化。'
    },
    {
      id: 3,
      title: '数据结构与算法考试',
      subject: '数据结构',
      status: 'completed',
      startTime: '2024-01-15 09:00:00',
      duration: 150,
      questionCount: 60,
      totalScore: 100,
      score: 85,
      description: '测试线性表、栈、队列、树、图等数据结构知识。包含算法复杂度分析。'
    },
    {
      id: 4,
      title: '算法设计与分析',
      subject: '算法',
      status: 'expired',
      startTime: '2024-01-10 16:00:00',
      duration: 180,
      questionCount: 70,
      totalScore: 100,
      score: null,
      description: '测试排序算法、搜索算法、动态规划等算法知识。重点考察算法效率。'
    },
    {
      id: 5,
      title: 'Spring框架应用考试',
      subject: 'Java',
      status: 'available',
      startTime: '2024-01-25 15:00:00',
      duration: 100,
      questionCount: 45,
      totalScore: 100,
      score: null,
      description: '测试Spring Boot、依赖注入、AOP等框架知识。包含实际项目案例分析。'
    },
    {
      id: 6,
      title: '计算机网络基础',
      subject: '网络',
      status: 'available',
      startTime: '2024-01-28 13:00:00',
      duration: 80,
      questionCount: 35,
      totalScore: 100,
      score: null,
      description: '测试网络协议、TCP/IP、HTTP等基础知识。包含网络故障排查。'
    }
  ]

  updateStats()
}

const updateStats = () => {
  const total = exams.value.length
  const available = exams.value.filter(e => e.status === 'available').length
  const inProgress = exams.value.filter(e => e.status === 'in_progress').length
  const completed = exams.value.filter(e => e.status === 'completed').length

  stats.value = { total, available, inProgress, completed }
}

onMounted(() => {
  loadExams()
})
</script>